<template>
  <view class="dw_container">
    <Goods v-for="(item, index) in goodsList" :key="index" :item="item" :type="'dw'">
      <checkbox
        v-model="item.checked"
        :checked="item.checked"
        style="padding-top: 80rpx; width: 40rpx"
        @click="changeChekced(item)"
        :status="true"
      />
    </Goods>
    <view class="bottom">
      <label @click="selectAll"> <checkbox v-model="checked" :checked="checked" /> 全选 </label>
      <text @click="dwConfirm">确定下载</text>
    </view>

    <Dialog
      :dialog="dialog"
      :title="title"
      :content="content"
      @confirm="dialogConfirm"
      @cancel="dialogCancel"
    >
    </Dialog>

    <view class="bg" v-if="bg_dialog" @click="clickBg">
      <view class="dwCompletePrompt">{{ dwCompletePrompt }}</view>
    </view>
  </view>
</template>

<script>
import Goods from '@/components/goods/goods.vue'
import { outBoundQuery, getDrugTestImage } from '@/api/order/index.js'
import Dialog from '@/components/dialog'

export default {
  components: { Goods, Dialog },
  data() {
    return {
      sn: '',
      goodsList: [],
      dialog: false,
      title: '温馨提示',
      content: '您确定要保存商品资质到系统相册吗？',
      imageList: [],
      dwCompletePrompt: '资质已下载保存到手机“我的相册” 请注意查收!',
      bg_dialog: false,
      dwCount: 0,
      saveCount: 0,
      checked: true,
      selectGoodsList: []
    }
  },
  onLoad(e) {
    this.sn = e.sn
    outBoundQuery(e.sn).then(res => {
      if (res.code === 200) {
        res.data.items.forEach(i => {
          this.$set(i, 'checked', true)
        })
        this.goodsList = res.data.items
        this.selectGoodsList = res.data.items
      }
    })
  },
  methods: {
    selectAll() {
      this.checked = !this.checked
      if (this.checked === true) {
        this.goodsList.forEach(i => {
          i.checked = true
        })
        this.selectGoodsList = this.goodsList
      } else {
        this.goodsList.forEach(i => {
          i.checked = false
        })
        this.selectGoodsList = []
      }
    },
    saveImage() {
      let that = this
      // 向用户发起授权请求
      uni.authorize({
        scope: 'scope.writePhotosAlbum',
        success: () => {
          // 已授权
          that.downLoadImg()
        },
        fail: () => {
          // 拒绝授权，获取当前设置
          uni.getSetting({
            success: result => {
              if (!result.authSetting['scope.writePhotosAlbum']) {
                that.isAuth()
              }
            }
          })
        }
      })
    },
    isAuth() {
      uni.showModal({
        content: '由于您还没有允许保存图片到您相册里,无法进行保存,请点击确定允许授权',
        success: res => {
          if (res.confirm) {
            uni.openSetting({
              success: result => {
                console.log(result.authSetting)
              }
            })
          }
        }
      })
    },
    downLoadImg() {
      let that = this
      that.dialog = false
      uni.showLoading({ title: '加载中' })
      this.imageList.forEach((i, j) => {
        uni.downloadFile({
          url: i,
          success: res => {
            if (res.statusCode === 200) {
              uni.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success: function () {
                  that.dwCount++
                },
                complete: () => {
                  console.log('保存：' + that.dwCount)
                  if (that.saveCount === that.imageList.length) {
                    uni.hideLoading()
                    if (that.saveCount === that.dwCount) {
                      that.bg_dialog = true
                      that.dwCompletePrompt = '资质已下载保存到手机“我的相册” 请注意查收!'
                    } else {
                      that.bg_dialog = true
                      that.dwCompletePrompt = '部分药品资质下载出错，请联系客服处理'
                    }
                  }
                }
              })
            }
          },
          complete: () => {
            that.saveCount++
            console.log('下载：' + that.saveCount)
          }
        })
      })
    },
    clickBg() {
      this.bg_dialog = false
      uni.navigateBack({ delta: 1 })
    },
    dialogCancel() {
      this.dialog = false
    },
    dialogConfirm() {
      let a = []
      this.goodsList.forEach(i => {
        if (i.checked) {
          a.push(i.id)
        }
      })
      // console.log(a)
      // a.outboundOrderItemId = a.outboundOrderItemId.substr(0, a.outboundOrderItemId.length - 1)
      getDrugTestImage(this.sn, { outboundOrderItemId: a + '' }).then(res => {
        if (res.code === 200) {
          this.imageList = res.data
          // #ifdef MP
          this.saveImage()
          // #endif
          // #ifndef MP
          this.downLoadImg()
          // #endif
        }
      })
    },
    changeChekced(item) {
      item.checked = !item.checked
      this.selectGoodsList = this.goodsList.filter(i => {
        return i.checked === true
      })
      if (this.selectGoodsList.length === this.goodsList.length) {
        this.checked = true
      } else {
        this.checked = false
      }
    },
    dwConfirm() {
      if (!this.goodsList.length) {
        return
      }
      if (!this.selectGoodsList.length) {
        uni.showToast({ icon: 'none', title: '请选中商品', mask: true })
        return
      }
      this.dialog = true
    }
  }
}
</script>

<style lang="scss" scoped>
.dw_container {
  min-height: 100vh;
  background: #f9f9f9;
  padding: 10rpx 0 120rpx 0;
  .bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 104rpx;
    background: #ffffff;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 0 50rpx 0 40rpx;
    box-sizing: border-box;
    z-index: 5;
    text {
      display: inline-block;
      width: 182rpx;
      height: 64rpx;
      background: #2871fc;
      border-radius: 32rpx;
      font-size: 29rpx;
      font-weight: 400;
      color: #ffffff;
      line-height: 60rpx;
      text-align: center;
      // margin-right: 50rpx;
    }
  }
  .bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba($color: #b2b2b2, $alpha: 0.3);
    z-index: 5;
    .dwCompletePrompt {
      box-sizing: border-box;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 615rpx;
      height: 194rpx;
      background: #ffffff;
      border-radius: 11rpx;
      font-size: 33rpx;
      font-weight: 400;
      color: #000000;
      text-align: center;
      padding: 52.08rpx 52.78rpx 52.08rpx 51.39rpx;
      line-height: 44.92rpx;
    }
  }
}
</style>
